<template>
  <h1>表单控件</h1>
  【模块编号】moduleId ： {{moduleId}}<br>
  【表单编号】formId ： {{formId}}<br>
  【表单列数】formColCount ： {{columnsNumber}}<br>
  【字段排序】colOrder ： {{colOrder}}<br>
  【控件联动】formColShow ： {{linkageMeta}}<br>
  【标签后缀】labelSuffix ： 【{{labelSuffix}}】<br>
  【标签宽度】labelWidth ： {{labelWidth}}<br>
  【控件尺寸】size ： {{size}}<br>
  【好像没有】reload ： {{reload}}<br>
  【好像不用】customerControl ： {{customerControl}}<br>
  【验证规则】ruleMeta ： {{ruleMeta}}<br>
  【分栏信息】subMeta ： {{subMeta}}<br>
  【model】model ： {{model}}<br>
  【扩展信息】$attrs：{{$attrs}}<br>
  
  <el-row :gutter="20">
    <el-col :span="6"
      style="border:1px solid #ddd"
      v-for="(item, index) in itemMeta" :key="index"
    >
      <form-item
        v-bind="item" 
        :model="model"
      />
    </el-col>
  </el-row>
</template>

<script lang="ts">

  import { defineComponent, reactive } from 'vue'
  import { ElRow, ElCol } from 'element-plus'
  import formItem from './30-form-item.vue'

  // import { formProps } from '../../../lib/form/props-form'

  export default defineComponent({
    name: 'ui-core-form-comp',
    components: {
      ElRow, ElCol,
      formItem
    },
    props: {
    },
    setup(props) {
      console.log('表单组件的 props：', props)

      const { formMeta } = props

      return {
        ...formMeta // 没有响应性
      }
    }
  })

</script>